<template>
  <div class="app-container">
    <AddAdmin v-show="isAddAdmin" :is-add-admin.sync="isAddAdmin" />
    <!-- 查询条件框 -->
    <el-card v-show="!isAddAdmin" class="box-card">
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="账号">
          <el-input v-model="form.uid" placeholder="请输入用户账号" />
        </el-form-item>
        <el-form-item label="用户名称">
          <el-input v-model="form.username" placeholder="请输入用户名称" />
        </el-form-item>
        <!-- <el-form-item label="角色">
          <el-select v-model="form.attrCateId" placeholder="请选择角色">
            <el-option v-for="item in attrTypes" :key="item.cateId" :label="item.cateName" :value="item.cateId" />
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain @click="addAdminInfo">添加管理员</el-button>
        </el-form-item>
      </el-form>
      <el-divider />
      <!-- 信息列表 -->
      <el-empty v-show="users.length===0" description="暂无数据" style="height:100%" />
      <el-table v-show="users.length>0" :data="users" style="width: 100%" stripe class="table">
        <el-table-column prop="uid" label="账号" width="120" />
        <el-table-column prop="username" label="用户名称" width="200" />
        <el-table-column prop="gender" label="性别" width="60">
          <template slot-scope="scope">
            {{ gender[scope.row.gender].name }}
          </template>
        </el-table-column>
        <el-table-column prop="address" label="住址" />
        <el-table-column prop="phone" label="手机号" />
        <el-table-column prop="email" label="邮箱" />
        <el-table-column prop="createTime" label="创建时间" />
        <!-- <el-table-column label="操作">
          <template slot-scope="scope">
            <el-row>
              <el-button type="primary" icon="el-icon-more-outline" circle />
            </el-row>
          </template>
        </el-table-column> -->
      </el-table>
      <el-pagination :page-size="form.pageSize" :pager-count="11" layout="prev, pager, next" :total="total" class="bottom" @current-change="handleCurrentChange" />
    </el-card>
  </div>
</template>

<script>
import { getUserList, getAllAdmins } from '@/api/user'
import AddAdmin from '@/components/user/AddAdmin.vue'
export default {
  name: 'Auth',
  components: {
    AddAdmin
  },
  data() {
    return {
      // form: {},
      users: [],
      form: {
        pageNum: 1,
        pageSize: 8
      },
      total: 0,
      gender: [
        { id: '0', name: '未知' },
        { id: '1', name: '男' },
        { id: '2', name: '女' }
      ],
      isAddAdmin: false
    }
  },
  watch: {
    isAddAdmin: {
      handler(newVal) {
        this.getAllAdmins()
      }
    }
  },
  created() {
    // this.getAllUser()
    this.getAllAdmins()
  },
  methods: {
    async getAllUser() {
      const res = await getUserList(this.form)
      console.log(res)
      if (res.code === 200) {
        const { users, total } = res.data
        console.log(users)
        this.users = users
        this.total = total
      } else {
        this.$message.error('查询失败')
      }
    },
    async getAllAdmins() {
      const res = await getAllAdmins(this.form)
      if (res.code === 200) {
        const { admins, total } = res.data
        this.users = admins
        this.total = total
        console.log(admins)
      }
    },
    search() {
      this.getAllAdmins()
    },
    handleCurrentChange(val) {
      this.form.pageNum = val
      this.search()
      // .then(res => {
      //   this.form.pageNum = 1
      // })
    },
    addAdminInfo() {
      this.isAddAdmin = true
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  width: 100%;

  .box-card {
    width: 100%;
    height: 100%;

    .table {
      width: 100%;
      height: 470px;
    }

    .bottom {
      margin-top: 10px;
      display: flex;
      justify-content: center;
    }

  }
}
</style>
